<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <Index v-if="isLogin"/>
    <Login v-else/>
    <!-- <HelloWorld/> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld'
import Index from "./components/Index";
import Login from "./components/Login";
import { mapGetters,mapMutations } from "vuex";

export default {
    name: 'App',
    components: {
        // HelloWorld
        Index,
        Login
    },
    data(){
        return {
            wewew:'sb'
        }
    },
    computed:{
        ...mapGetters([
            'isLogin'
        ]),
    },
    methods:{
        ...mapMutations([
            'logout'
        ]),
    },
    created(){
        const vmThis = this;
        window.onclose  = function(){
            vmThis.logout();
        }
    }
}
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* text-align: center; */
        color: #2c3e50;
        /* margin-top: 60px; */
    }
    html,body{
        padding: 0px;
        margin: 0px;
    }

    .search-bar .el-form-item {
        width: 120px;
    }

    .el-cascader--small .el-cascader__label {
        line-height: 36px;
    }

    .pull-right{
        float: right;
    }
    .v--modal-overlay{
        background-color: rgba(0, 0, 0, 0.5);
    }
    .slide-fade-enter-active, .slide-fade-leave-active {
        transition: all 0.4s;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        opacity: 0;
        transform: translateY(-20px);
    }
    .hide{
        display: none !important;
    }

    .text-align-center{
        text-align: center;
    }
    .text-left {
        text-align: left;
    }
    .inline-block{
        display: inline-block;
    }

    .el-table__body tr.current-row>td {
        /* background: #c9e5f5; */
        background: rgba(70, 163, 216, 0.61)
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: rgba(70, 163, 216, 0.9);  
    }

    /* .slide-fade-enter-active, .slide-fade-leave-active {
        transition: all 0.4s;
    }

    .slide-fade-enter, .slide-fade-leave-active {
        opacity: 0;
        transform: translateY(-20px);
    } */

    .el-table .erro-row {
        background: #ff4949;
    }

    .el-table .info-row {
        background: #50bfff;
    }

    .el-table .warning-row {
        background: #f7ba2a;
    }
    
</style>
